import React from 'react';
import Title from './title';
import {useHistory} from 'react-router';
import Lazyload from 'react-lazyload'; 
import style from './HotGoods.module.scss';

interface Iprops {
    hotGoodsList: Array<object>,
}
const HotGoods:React.FC<Iprops> = props=>{
    const history = useHistory();
    return <div className={style.hotGoods}>
        <Title title="人气推荐" background="#fff"/>
        <div className="hotGoods-wrap">
            {
                props.hotGoodsList.map((item:any)=>{
                    return <div 
                        className={style.item} 
                        key={item.id}
                        onClick={()=>history.push(`/addcart/${item.id}`)}
                        >
                        <div className={style.left}>
                            <Lazyload>
                                <img src={item.list_pic_url} alt=""/>
                            </Lazyload>
                        </div>
                        <div className={style.right}>
                            <h3>{item.name}</h3>
                            <p>{item.goods_brief}</p>
                            <p><b>￥ {item.retail_price}</b></p>
                        </div>
                    </div>
                })
            }
        </div>
    </div>
}

export default HotGoods